import { Table, TableProps,Space,Modal } from "antd";
import { CustomRecord } from '../types';
import { useStore } from "../useStore"
import { useEffect } from "react";
export const ContactsTable = (): JSX.Element => {
	const [emergencyTable,editEmergencyData,delEmergencyData,emergencyList] = useStore((state) => [
		state.emergencyTable,
		state.editEmergencyData,
		state.delEmergencyData,
		state.emergencyList
	]);
	//表格项
	const columns: TableProps<CustomRecord>['columns'] = [
		{
			title: '序号',
			key: 'index',
			align:'center',
			render: (text, record, index) => `${index + 1}`,
			width:'5%',
		},
		{
			title: '姓名',
			dataIndex: 'name',
			key: 'name',
			align:'center',
			width:120,
		},
		{
			title: '关系',
			dataIndex: 'relationship',
			key: 'relationship',
			width:120,
		},
		{
			title: '联系方式',
			dataIndex: 'mobilePhone',
			key: 'mobilePhone',
			width:120,
		},
		{
			title: '操作',
			key: 'operate',
			fixed: 'right',
			width:'10%',
			render: (text,record,index) => {
				return (
					<Space>
						<a onClick={()=>editEmergencyData(record,index)}>编辑</a>
						<a style={{color:'red'}} onClick={() => {
							Modal.confirm({
								title: "提示",
								content: "此操作将永久删除该条记录，是否继续？",
								onOk(){
									delEmergencyData(record);
								}
							})
						}}>删除</a>
					</Space>
				);
			}
		},
	];
	useEffect(() => {
		emergencyList()
	}, [])
  return (
		<>
			{/* 表格 */}
			<Table size="small" className="my-2.5" scroll={{ x: "100%" }} columns={columns} dataSource={emergencyTable.data} bordered={true} pagination={false} rowKey={(record) => `${record.keyId}`}></Table>
		</>
	);
};